<template>
  <div class="page-common-layout projectOverview-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-input placeholder="项目名称" v-model="queryInfo.proName"></a-input>
          <a-select
            placeholder="请选择项目状态"
            v-model="queryInfo.proStatus"
            allowClear
            showSearch
            :filter-option="filterOption"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in projectTypeSoucre"
              :key="item.dicItemCode"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <a-select
            placeholder="请选择工程类型"
            allowClear
            showSearch
            v-model="queryInfo.engType"
            :filter-option="filterOption"
            @change="search()"
            class="project-select"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in typeSource"
              :key="item.dicItemCode"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <a-select
            placeholder="请选择区位"
            allowClear
            showSearch
            v-model="queryInfo.workArea"
            :filter-option="filterOption"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in areaSource"
              :key="item.dicItemCode"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="project-body-container">
      <div class="operate">
        <a-button
          @click="handleAdd()"
          class="cu-btn-primary margin-bottom-xs"
          v-action:xmzl_add
        >
          项目建档
        </a-button>
        <a-button
          @click="handleExport()"
          class="cu-btn-primary margin-bottom-xs"
        >
          导出全部
        </a-button>
      </div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="proName" title="项目名称" min-width="200">
            <template #default="{ row }">
              <span style="cursor: pointer;" @dblclick="gotoDetail(row)">{{
                row.proName
              }}</span>
            </template>
          </vxe-column>
          <vxe-column field="roadMoney" title="投资规模(万元)"> </vxe-column>

          <vxe-column field="proStatusDesc" title="项目状态"> </vxe-column>
          <vxe-column field="engTypeDesc" title="工程类型"> </vxe-column>
          <vxe-column field="workAreaDesc" title="区位"> </vxe-column>
          <vxe-column
            field="groupDirector"
            title="集团工程技术部分管主任"
            width="180"
          >
          </vxe-column>
          <vxe-column field="contacts" title="联系人"> </vxe-column>
          <vxe-column field="contactsPhone" title="联系方式"> </vxe-column>
          <vxe-column
            field="operate"
            width="140"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoDetail(row)">
                  查看
                </a-button>
                <a-button
                  type="link"
                  @click="handleFlowChart(row)"
                  v-if="row.flowChart"
                >
                  流程图
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>

    <!-- 编辑弹窗-->
    <edit-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :url="url"
      requestMethod="post"
      :tableDataType="tableDataType"
      @cancel="handleCancel()"
      @ok="handleOk()"
      :customFooter="modalFooter"
    />
    <!-- 详情弹窗 -->
    <detailModal
      :visible.sync="detailModalVisible"
      :parameter="currentRecord"
    ></detailModal>
    <!-- 项目流程图 -->
    <flowModal
      :visible.sync="flowModalVisible"
      :parameter="currentRecord"
    ></flowModal>

    <!-- 项目新增编辑 -->
    <peojectModal
      ref="projectModal"
      :visible.sync="projectVisible"
      :model="projectMdl"
      :key="projectKey"
    ></peojectModal>
  </div>
</template>

<script>
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import { getDicItemByCode } from "@/api/common.js";
import {
  pageProjectOverview,
  exportProjectExcel,
} from "@/api/constructManage.js";
import editForm from "@/pages/form/formPreview/edit.vue";
import detailModal from "./components/detailModal.vue";
import flowModal from "./components/flowModal.vue";
import { axios } from "@/utils/request";
import { downLoadFileByArraybuffer } from "@/utils/util";
//新增弹窗
import peojectModal from "@/pages/mdata/projectData/peojectEdit.vue";
export default {
  components: {
    ScreenConditions,
    editForm,
    detailModal,
    flowModal,
    peojectModal,
  },
  data() {
    return {
      projectTypeSoucre: [],
      typeSource: [],
      areaSource: [],
      queryInfo: {
        proName: "",
        proStatus: undefined, //项目状态
        engType: undefined, //  工程类型
        workArea: undefined, //  区位
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      visible: false,
      confirmLoading: false,
      url: {
        save: "/form/formDatabase/formSave",
        update: "/form/formDatabase/formUpdate",
      },
      tableDataType: "",
      tableUuid: "21B16F64BF29466082347E06DBBB7529",
      modalFooter: {},
      //详情
      detailModalVisible: false,
      currentRecord: {},
      //流程图
      flowModalVisible: false,
      flowKey: "0",
      //项目
      projectKey: "project",
      projectVisible: false,
      projectMdl: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //导出
    handleExport() {
      exportProjectExcel()
        .then((res) => {
          downLoadFileByArraybuffer(res, "项目总览.xlsx");
        })
        .catch((_) => {
          this.$message.error("导出失败，请稍后重试！");
        });
    },
    // 新增
    handleAdd() {
      this.projectKey = Date.now();
      this.projectVisible = true;
      this.projectMdl = {
        text: "项目建档",
      };
    },

    //流程图
    handleFlowChart(row) {
      this.flowKey = Date.now();
      this.currentRecord = row;
      this.flowModalVisible = true;
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    reset() {
      this.queryInfo = {
        proName: "",
        proStatus: undefined,
        engType: undefined,
        workArea: undefined,
      };
      this.search();
    },

    getData() {
      Promise.all([
        this.getTableData(),
        this.getProjectData(),
        this.getTypeData(),
        this.getAreaData(),
      ]);
    },
    //查询项目状态
    getProjectData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "proStatus" })
          .then((res) => {
            let { data } = res;
            this.projectTypeSoucre = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectTypeSoucre = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询工程类型
    getTypeData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "engineeringType" })
          .then((res) => {
            let { data } = res;
            this.typeSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.typeSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询区位
    getAreaData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "workArea" })
          .then((res) => {
            let { data } = res;
            this.areaSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.areaSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        proName,
        proStatus = "",
        engType = "",
        workArea = "",
      } = this.queryInfo;
      pageProjectOverview({
        page,
        pageSize,
        proName,
        proStatus,
        engType,
        workArea,
      })
        .then((res) => {
          this.tableData = res?.rows || [];
          this.pager.total = res?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //编辑
    async editor(record = {}) {
      this.modalFooter = {};
      let { uuid } = record;
      this.visible = true;
      let formJsonData = await this.loadDataJson(this.tableUuid);
      let { editApiUrl } = JSON.parse(formJsonData)?.config ?? {};
      this.url.update = editApiUrl ?? "/form/formDatabase/formUpdate";
      this.$refs.createModal.title = "编辑";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          formJsonData,
          res
        );
      });
    },
    //查看
    async gotoDetail(row) {
      this.detailModalVisible = true;
      this.currentRecord = row;
      return;
      this.modalFooter = { footer: null };
      let { uuid } = row;
      this.visible = true;
      let formJsonData = await this.loadDataJson(this.tableUuid);
      this.$refs.createModal.title = "详情";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          this.dealData(true, formJsonData),
          res
        );
      });
    },
    //详情禁用
    dealData(disabled = false, formJsonData = "{}") {
      let dealData = JSON.parse(formJsonData);
      let { list = [], config } = dealData;
      config.hideRequiredMark = true;
      list.forEach((v) => {
        let { columns = [], options } = v;
        if (options) {
          options.disabled = disabled;
        }
        columns.forEach((item) => {
          let { list = [] } = item;
          list.forEach((c) => {
            let { options } = c;
            options.disabled = disabled;
          });
        });
      });
      return JSON.stringify(dealData);
    },
    loadDataJson(tableUuid = "") {
      return new Promise((reslove) => {
        this.$post("/form/formBasicConfigure/getDetailByUuid", {
          uuid: tableUuid,
        })
          .then((res) => {
            this.tableDataType = res.formDatabase?.type || "";
            reslove(res.formDesign.designJson);
          })
          .catch((_) => {
            reslove({});
          });
      });
    },

    //关闭弹窗
    handleCancel() {
      this.visible = false;
    },

    handleOk() {
      this.visible = false;
      this.getTableData();
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.projectOverview-container {
  display: flex;
  flex-direction: column;
  .project-body-container {
    flex: 1;
    background-color: @base-bg-color;
    flex-shrink: 0;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .operate {
      display: flex;
    }
    .main {
      flex: 1;
      .status {
        color: #4bc964;
      }
      .no {
        color: #1677ff;
      }
    }
    .pager-container {
      flex-shrink: 0;
      box-sizing: border-box;
    }
  }
}
</style>
